<template>
  <div class="kuaiZhao">
    <!-- 引入头部组件 并修改内容 -->
    <div class="header_box">
      <header1View>
        <template v-slot:left>
          <div class="title_left">
            <van-icon name="arrow-left"
                      class="icon"
                      @click="back" />
          </div>
        </template>
        <template v-slot:center>
          <div class="title_center">
            交易快照
          </div>
        </template>
      </header1View>
    </div>
    <div class="desc">
      交易快照包含订单创建时的商品描述和下单信息，买卖
      双方和平台在发生交易争议时，该页面作为判定依据。
    </div>

    <div class="photo">
      <div class="p_desc">订单包含的商品</div>
      <div class="goodsList">
        <!-- 交易快照 商品信息demo -->
        <div class="goodsItem"
             v-for="item in goodsList"
             :key="item.num">
          <div class="pic_words">
            <!-- 左边图片 -->
            <div class="goodsItem_left">
              <img :src="item.src"
                   alt="">
            </div>
            <!-- 右边信息 -->
            <div class="goodsItem_right">
              <div class="goodsTitle">{{item.title}}</div>
              <div class="weight_price">
                <div>{{item.weight}}</div>
                <div>{{item.num}}</div>
              </div>
            </div>
          </div>
          <!-- 交易快照按钮 -->
          <div class="btn">
            <button class="photoBtn"
                    @click="kuaiZhaoDetails">交易快照</button>
          </div>

        </div>

      </div>
    </div>
  </div>
</template>

<script>
import header1View from '../../components/OrdersComponents/header1View.vue'
export default {
  data () {
    return {
      goodsList: [
        {
          title: '烤肉两人套餐',
          src: 'https://cdn3.axureshop.com/demo/1525603/images/%E5%9B%A2%E8%B4%AD%E4%BA%A4%E6%98%93%E5%BF%AB%E7%85%A7/u4936.png',
          weight: '1396P',
          num: 'x2'
        },
        {
          title: '烤鱼单人套餐',
          src: 'https://cdn3.axureshop.com/demo/1525603/images/%E5%9B%A2%E8%B4%AD%E4%BA%A4%E6%98%93%E5%BF%AB%E7%85%A7/u4936.png',
          weight: '290P',
          num: 'x1'
        }
      ]
    }
  },
  components: {
    header1View,
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    kuaiZhaoDetails () {
      this.$router.push('/kuaiZhaoDetails')
    }
  }
}
</script>

<style scoped lang="scss">
.kuaiZhao {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  font-size: 14px;
}
.desc {
  margin: 15px;
  color: #6a6868;
}
.title_center {
  width: 100px;
  margin: 0 auto;
  align-items: center;
}
.icon {
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -8px;
}
.photo {
  background-color: #fff;
  margin: 10px;
  border-radius: 15px;
}
.p_desc {
  font-size: 14px;
  font-weight: 600;
  padding: 10px;
}
.goodsTitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.goodsItem {
  padding: 0px 10px;
  margin-top: 15px;
  border-bottom: 1px solid rgb(234, 232, 232);
}
.pic_words {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
.goodsItem_left {
  width: 20%;
}
.goodsItem_right {
  width: 75%;
}
.goodsItem_left img {
  width: 60px;
  height: 60px;
  border: 1px solid rgb(195, 193, 193);
}
.goodsTitle,
.weight_price {
  height: 30px;
  line-height: 30px;
}
.weight_price {
  display: flex;
  justify-content: space-between;
}
.btn {
  width: 100%;
  height: 40px;
}
.photoBtn {
  height: 30px;
  line-height: 30px;
  width: 80px;
  color: rgb(56, 56, 56);
  background-color: #fff;
  border: rgb(188, 186, 186) 1px solid;
  border-radius: 15px;
  display: inline-block;
  float: right;
}
</style>